import React from 'react';
import Breadcrumb from 'components/common/Breadcrumb';
import './index.less';
import { Select, DatePicker, Button, Form, Table } from 'antd';
import { IArea, getAllArea } from 'api/Area';
import { useAntdTable, useRequest } from 'ahooks';
import moment from 'moment';
import { getOperateList, OperateTypes, OperatePlatform } from 'api/OperateLog';
import { PaginatedParams } from 'ahooks/lib/useAntdTable';

const { Option } = Select;
const { RangePicker } = DatePicker;
const OperationRecord = () => {
    const { data: areas = [] } = useRequest(getAllArea);
    const columns = [{
        title: '路桩区域',
        dataIndex: 'areaId',
        render: (areaId: number) => areas.find(area => area.id === areaId)?.name
    }, {
        title: '路桩ID',
        dataIndex: 'liftings',
    }, {
        title: '操作指令',
        dataIndex: 'type',
        render: (type: number) => OperateTypes[type]
    }, {
        title: '操作方式',
        dataIndex: 'operate',
        render: (platform: number) => OperatePlatform[platform]
    }, {
        title: '操作账号',
        dataIndex: 'createName'
    }, {
        title: '操作时间',
        dataIndex: 'createTime'
    }];
    const [form] = Form.useForm()
    const getTableData = (
        { current, pageSize }: PaginatedParams[0],
        formData: any,
    ) => {
        console.log(formData)
        const query = {
            current,
            pageSize,
            areaId: formData.areaId,
            startTime: formData.timeRange ? formData.timeRange[0].format('YYYY-MM-DD') : '',
            endTime: formData.timeRange ? formData.timeRange[1].format('YYYY-MM-DD') : ''
        }
        return getOperateList(query).then((res) => ({
            total: res.totalCount,
            list: res.list
        }));
    };
    const { tableProps, search } = useAntdTable(getTableData, {
        defaultPageSize: 5,
        form,
    });
    const { submit } = search;
    return (
        <div className="operation-record">
            <Breadcrumb crumbs={['智能管控', '操作记录']} />
            <Form form={form} layout="inline" className="mb20" style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <Form.Item label="路桩区域" name="areaId">
                    <Select style={{ width: 200 }} allowClear>
                        {areas.map((area: IArea) => (
                            <Option key={area.id} value={area.id || ''}>
                                {area.name}
                            </Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item label="时间" name="timeRange">
                    <RangePicker
                        ranges={{
                            今天: [moment(), moment()],
                            本月: [moment().startOf('month'), moment().endOf('month')],
                        }}
                        showTime
                        format="YYYY/MM/DD"
                        style={{ width: '100%' }}
                    ></RangePicker>
                </Form.Item>
                <Button onClick={submit}>搜索</Button>
            </Form>
            <Table columns={columns} rowKey="id" {...tableProps} />
        </div>
    );
};
export default OperationRecord;
